<template>
    <div class="container-info">
        <h3>集装箱信息</h3>
        <div class="btn-box">
            <Button type="primary" @click="newItem" :disabled="disabled" size="small">新增</Button>
            <Button type="primary" @click="saveHandle" :disabled="disabled" size="small">保存</Button>
            <Button type="primary" @click="cancelHandle" :disabled="disabled" size="small">取消</Button>
            <Button type="primary" @click="removeItem" :disabled="disabled" size="small">删除</Button>
        </div>
        <div class="data-box form-mini">
            <table class="data-table" cellpadding="0" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th width="10%">序号</th>
                        <th width="30%">集装箱（器）编号</th>
                        <th width="20%">类型</th>
                        <th width="20%">来源代码</th>
                        <th width="20%">重箱或空箱标识</th>
                    </tr>
                </thead>
                <tbody>
                    <tr
                        v-for="(item, index) in containerList"
                        :key="index"
                        @dblclick="dblclickHandle(item)"
                        @click="selectItem(index)"
                        :class="{'current-row' : currentIndex === index}"
                    >
                        <td width="10%">
                            <p>{{ index + 1 }}</p>
                        </td>
                        <td width="30%">  <!--集装箱（器）编号-->
                            <p v-if="!item.editStatus">{{ item.containerNo }}</p>
                            <Input
                                v-model="item.containerNo"
                                v-if="item.editStatus"
                                size="small"
                                class="containerNo"
                                @on-keyup="containerNoKeyUp(containerList, index, item.containerNo)"
                                @on-enter="containerNoEnter"
                            />
                        </td>
                        <td width="20%">
                            <p v-if="!item.editStatus">{{ item.containerType }}</p>
                            <Input v-model="item.containerType" v-if="item.editStatus" disabled size="small"/>
                        </td>
                        <td width="20%">
                            <p v-if="!item.editStatus">{{ item.containerSources }}</p>
                            <Input v-model="item.containerSources" v-if="item.editStatus" disabled size="small"/>
                        </td>
                        <td width="20%">
                            <p v-if="!item.editStatus">{{ item.containerFlagName }}</p>
                            <Select
                                v-if="item.editStatus"
                                v-model="item.containerFlagName"
                                clearable
                                filterable
                                size="small"
                                :transfer="true"
                                disabled
                            >
                                <Option
                                    v-for="(option, index) in mContainerFlagList"
                                    :key="index"
                                    :value="option.dataName"
                                    :label="option.dataCode +'/'+ option.dataName"
                                >
                                </Option>
                            </Select>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
import { debounce } from '@/libs/tools'
import $ from 'jquery'

export default {
    name: 'ContainerInfo',
    props: ['mContainerFlagList', 'parentParams', 'disabled'],
    data () {
        return {
            containerList: [],
            prevList: [],
            currentIndex: ''
        }
    },

    watch: {
        'parentParams' (n, o) {
            this.containerList = []
            this.currentIndex = ''
            if (JSON.stringify(n) === '{}' || !('consignmentContainers' in n.data)) { // 如果是手动新增 return false
                return false
            }
            let list = n.data.consignmentContainers // 如果是编辑初始赋值
            if (list.length > 0) {
                list.forEach(item => {
                    let obj = {
                        containerNo: item.containerNo,
                        containerType: item.containerType,
                        containerSources: item.containerSources,
                        containerFlag: item.containerFlag,
                        containerFlagName: item.containerFlagName,
                        editStatus: false
                    }
                    this.containerList.push(obj)
                })
            }
            this.prevList = JSON.parse(JSON.stringify(this.containerList))
        }
    },

    methods: {
        newItem () {
            if (JSON.stringify(this.parentParams) !== '{}') {
                let obj = {
                    containerNo: '',
                    containerType: '',
                    containerSources: '',
                    containerFlag: '',
                    containerFlagName: '',
                    editStatus: true
                }
                this.containerList.push(obj)
                this.$nextTick(() => {
                    $('.containerNo .ivu-input').focus()
                })
            } else {
                this.$Message.warning('请先选择提运单')
                return false
            }
        },

        dblclickHandle (item) {
            if (this.disabled) {
                return false
            }
            item.editStatus = !item.editStatus
        },

        selectItem (index) {
            this.currentIndex = index
        },

        removeItem () {
            if (!this.currentIndex.toString()) {
                this.$Message.warning('请单击选择需要删除的行')
                return false
            }
            if (this.containerList.length === 0) {
                this.$Message.warning('已经没有删除的数据了')
                return false
            }
            this.containerList.splice(this.currentIndex, 1)
            this.currentIndex = ''
        },

        cancelHandle () {
            this.currentIndex = ''
            this.containerList = JSON.parse(JSON.stringify(this.prevList))
        },

        saveHandle () {
            let list = this.containerList
            let mContainerFlagList = this.mContainerFlagList
            if (list.length === 0) {
                this.$Message.warning('没有需要保存的数据')
                return false
            }
            this.prevList = JSON.parse(JSON.stringify(this.containerList))
            for (let i = 0; i < list.length; i++) {
                list[i].editStatus = false
                for (let j = 0; j < mContainerFlagList.length; j++) {
                    if (list[i].containerFlagName === mContainerFlagList[j].dataName) {
                        list[i].containerFlag = mContainerFlagList[j].dataCode
                    }
                }
            }
            let res = {
                index: this.parentParams.index,
                list: list
            }
            this.$emit('saveContainerInfo', res)
            this.$Message.success('保存成功')
        },

        containerNoKeyUp: debounce(function (list, index, val) {
            let reg = /^[a-zA-Z]+$/
            let first4 = ''
            if (val.length >= 4) {
                first4 = val.substr(0, 4)
                let last = val.substr(4)
                if (reg.test(first4)) {
                    list[index].containerNo = first4.toUpperCase() + last
                }
            }
        }, 300),

        containerNoEnter () {
            setTimeout(() => {
                this.saveHandle()
            }, 300)
            $('.containerNo .ivu-input').blur()
        }

    } // methods end
}

</script>

<style lang="less" scoped>

</style>
